// 源插件
import React, { Fragment, PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';

// 视图插件
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  message,
  notification,
  Row,
  Switch,
  Select,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';

// css OR less预编译器

// 图片

const { Option } = Select;

/**
 *  Describe:数据连接
 */

@connect(({ dq, loading }) => ({
  dq,
  loading: loading.models.dqRule,
}))
@Form.create()
class Parts extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    dataSourceTotal: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceBondPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceStockPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceAqPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceDqPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceOptionPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceForexOptionPart: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceHedgeFundPart: {
      data: [],
      total: [],
      code: 0,
    },
    row: {},
    selectDate: [],
  };

  // dataSourceChange() {
  //   const { dispatch } = this.props;
  //   const that = this;
  //   dispatch({
  //     type: 'parts/GetBondPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceBondPart: {
  //           title: res.date+'  债券部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: 'ISIN',
  //               width: 100,
  //               dataIndex: 'isin',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '本金数额',
  //               dataIndex: 'unit',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '货币',
  //               width: 75,
  //               dataIndex: 'currency',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '到期日',
  //               dataIndex: 'expireDate',
  //               type: 'date',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: '下次可赎回',
  //               width: 75,
  //               dataIndex: 'callDt',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Moody\'s',
  //               width: 75,
  //               dataIndex: 'modyRtng',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'S&P',
  //               width: 75,
  //               dataIndex: 'snpRtng',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '成本',
  //               width: 75,
  //               dataIndex: 'costPrice',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '价格',
  //               width: 75,
  //               dataIndex: 'currentPrice',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '價格升值',
  //               width: 75,
  //               dataIndex: 'priceUp',
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '市值',
  //               width: 75,
  //               dataIndex: 'marketValue',
  //               type: 'number',
  //               sorter: true,
  //             },
  //           ]
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetStockPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceStockPart: {
  //           title: res.date+'  股票部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: '股码',
  //               width: 100,
  //               dataIndex: 'code',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '股名',
  //               width: 100,
  //               dataIndex: 'name',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '货币',
  //               width: 75,
  //               dataIndex: 'currency',
  //               type: 'string',
  //               filterAuto: true,
  //             },
  //             {
  //               title: '股数',
  //               dataIndex: 'amount',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '状态',
  //               width: 75,
  //               dataIndex: 'state',
  //               type: 'string',
  //               filterAuto: true,
  //             },
  //             {
  //               title: '市价',
  //               dataIndex: 'marketPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '成本',
  //               dataIndex: 'costPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '市值',
  //               dataIndex: 'marketValue',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '市值(USD)',
  //               dataIndex: 'marketValueUsd',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //           ]
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetAqPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceAqPart: {
  //           title: res.date+'  AQ部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: 'Stock',
  //               width: 100,
  //               dataIndex: 'code',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: 'NAME',
  //               width: 100,
  //               dataIndex: 'des1',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: 'Start Date',
  //               dataIndex: 'tradeDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: 'Normal Shares',
  //               dataIndex: 'normalShares',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Step Up Shares',
  //               dataIndex: 'stepUpShares',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Trade Date Price',
  //               dataIndex: 'tradeDatePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Current Price',
  //               dataIndex: 'currentPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Strike',
  //               dataIndex: 'strikePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'KO',
  //               dataIndex: 'koPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'End Date',
  //               dataIndex: 'expireDate',
  //               type: 'date',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: 'Remaining Exposure',
  //               dataIndex: 'notl',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Remaining Exposure (USD)',
  //               dataIndex: 'notlUsd',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '距KO幅度',
  //               dataIndex: 'toKoPercent',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 return value === null ? null : (
  //                   <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
  //                 );
  //               },
  //             },
  //             {
  //               title: '距执行价幅度',
  //               dataIndex: 'toStrikePercent',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 return value === null ? null : (
  //                   <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
  //                 );
  //               },
  //             },
  //           ],
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetDqPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceDqPart: {
  //           title: res.date+'  DQ部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: 'Stock',
  //               width: 100,
  //               dataIndex: 'code',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: 'NAME',
  //               width: 100,
  //               dataIndex: 'des1',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: 'Start Date',
  //               dataIndex: 'tradeDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: 'Normal Shares',
  //               dataIndex: 'normalShares',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Step Up Shares',
  //               dataIndex: 'stepUpShares',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Trade Date Price',
  //               dataIndex: 'tradeDatePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Current Price',
  //               dataIndex: 'currentPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Strike',
  //               dataIndex: 'strikePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'KO',
  //               dataIndex: 'koPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'End Date',
  //               dataIndex: 'expireDate',
  //               type: 'date',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: 'Remaining Exposure',
  //               dataIndex: 'notl',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: 'Remaining Exposure (USD)',
  //               dataIndex: 'notlUsd',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '距KO幅度',
  //               dataIndex: 'toKoPercent',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 return value === null ? null : (
  //                   <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
  //                 );
  //               },
  //             },
  //             {
  //               title: '距执行价幅度',
  //               dataIndex: 'toStrikePercent',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: (value, row, index) => {
  //                 return value === null ? null : (
  //                   <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
  //                 );
  //               },
  //             },
  //           ],
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetOptionPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceOptionPart: {
  //           title: res.date+'  股票期权部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: '交易',
  //               width: 100,
  //               dataIndex: 'sellType',
  //               type: 'string',
  //               filters: [
  //                 {
  //                   text: 'Sell Put',
  //                   value: 1,
  //                 },{
  //                   text: 'Sell Call',
  //                   value: 2,
  //                 },{
  //                   text: 'Buy Put',
  //                   value: 3,
  //                 },{
  //                   text: 'Buy Call',
  //                   value: 4,
  //                 }
  //               ],
  //               render: text => (
  //                 <span>{{ 2: 'Sell Call', 1: 'Sell Put', 3: 'Buy Put', 4: 'Buy Call' }[text]}</span>
  //               ),
  //             },
  //             {
  //               title: '挂勾',
  //               width: 100,
  //               dataIndex: 'code',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '行使价',
  //               dataIndex: 'strikePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '股数',
  //               dataIndex: 'notl',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '交易日',
  //               dataIndex: 'tradeDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: '到期日',
  //               dataIndex: 'expireDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: '现在价格',
  //               dataIndex: 'currentPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '交易时价格',
  //               dataIndex: 'tradeDatePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '距离行使价',
  //               dataIndex: 'optionToStrike',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: value => (
  //                 <span>{value?NumberDivide(mathService.mul(value,100), null, '%'):null}</span>
  //               ),
  //             },
  //             {
  //               title: '收益',
  //               dataIndex: 'optionProfit',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '绝对金额',
  //               dataIndex: 'totalCostPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '曝险部位 (USD)',
  //               dataIndex: 'positionSize',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //           ],
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetForexOptionPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceForexOptionPart: {
  //           title: res.date+'  外汇期权部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: '结构',
  //               width: 100,
  //               dataIndex: 'des2',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '交易日',
  //               dataIndex: 'tradeDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span >{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: '基准货币',
  //               width: 100,
  //               dataIndex: 'currency',
  //               type: 'string',
  //               filterAuto: true,
  //             },
  //             {
  //               title: '相对货币',
  //               width: 100,
  //               dataIndex: 'counterCurrency',
  //               type: 'string',
  //               filterAuto: true,
  //             },
  //             {
  //               title: '金额',
  //               dataIndex: 'notl',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '行使价',
  //               dataIndex: 'strikePrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '比价日',
  //               dataIndex: 'expireDate',
  //               type: 'date',
  //               render: (value, row, index) => {
  //                 if (!value) return null;
  //                 return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
  //               }
  //             },
  //             {
  //               title: '期权金收入',
  //               dataIndex: 'initPrem',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '美金曝险',
  //               dataIndex: 'notl',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '现价',
  //               dataIndex: 'currentPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '价内程度',
  //               dataIndex: 'inPriceDegree',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: value => (
  //                 <span>{value?NumberDivide(mathService.mul(value,100), null, '%'):null}</span>
  //               ),
  //             },
  //           ],
  //         },
  //       })
  //     }
  //   });
  //   dispatch({
  //     type: 'parts/GetHedgeFundPart',
  //     callback: (res) => {
  //       that.setState({
  //         dataSourceHedgeFundPart: {
  //           title: res.date+'  对冲基金部分',
  //           code: 1,
  //           data: res.list,
  //           total: [],
  //           columns: [
  //             {
  //               title: '基金名称',
  //               width: 100,
  //               dataIndex: 'des1',
  //               type: 'string',
  //               search: true,
  //             },
  //             {
  //               title: '货币',
  //               width: 100,
  //               dataIndex: 'currency',
  //               type: 'string',
  //               filterAuto: true,
  //             },
  //             {
  //               title: '持仓单位',
  //               dataIndex: 'unit',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '成本价',
  //               dataIndex: 'costPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '现价',
  //               dataIndex: 'currentPrice',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '仓位市值',
  //               dataIndex: 'marketValue',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //             },
  //             {
  //               title: '价格升跌',
  //               dataIndex: 'priceUp',
  //               width: 75,
  //               type: 'number',
  //               sorter: true,
  //               render: value => (
  //                 <span>{value?NumberDivide(mathService.mul(value,100), null, '%'):null}</span>
  //               ),
  //             },
  //           ],
  //         },
  //       })
  //     }
  //   });
  // }

  dataSourceChange(date) {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'parts/GetAllPart',
      payload: date || '',
      callback: res => {
        const dataSourceTotal = {
          title: `${res.date} 花旗部位一览`,
          titleTotal: false,
          code: 1,
          data: [
            { name: '债券部位', usd: res.list.bondAmount },
            { name: '股票部位', usd: res.list.stockAmount },
            { name: 'Accumulator', usd: res.list.aqAmount },
            { name: 'Decumulator', usd: res.list.dqAmount },
            { name: 'Listed Option', usd: res.list.stockOptionAmount },
            { name: '外汇部位', usd: res.list.forexOptionAmount },
            { name: '对冲基金部位', usd: res.list.hedgeFundAmount },
          ],
          total: ['usd'],
          columns: [
            {
              title: '',
              type: 'string',
              dataIndex: 'name',
              width: 75,
            },
            {
              title: 'Amount In USD',
              dataIndex: 'usd',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 2)}</span>;
              },
            },
          ],
        };
        that.setState({
          dataSourceTotal,
          dataSourceBondPart: {
            title: '债券部分',
            code: 1,
            data: res.list.bondList,
            total: [],
            columns: [
              {
                title: 'ISIN',
                width: 100,
                dataIndex: 'isin',
                type: 'string',
                search: true,
              },
              {
                title: '本金数额',
                dataIndex: 'unit',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '货币',
                width: 75,
                dataIndex: 'currency',
                type: 'number',
                sorter: true,
              },
              {
                title: '到期日',
                dataIndex: 'expireDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '下次可赎回',
                width: 75,
                dataIndex: 'callDt',
                type: 'number',
                sorter: true,
              },
              {
                title: "Moody's",
                width: 75,
                dataIndex: 'modyRtng',
                type: 'number',
                sorter: true,
              },
              {
                title: 'S&P',
                width: 75,
                dataIndex: 'snpRtng',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本',
                width: 75,
                dataIndex: 'costPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '价格',
                width: 75,
                dataIndex: 'currentPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '價格升值',
                width: 75,
                dataIndex: 'priceUp',
                type: 'number',
                sorter: true,
              },
              {
                title: '市值',
                width: 75,
                dataIndex: 'marketValue',
                type: 'number',
                sorter: true,
              },
            ],
          },
          dataSourceStockPart: {
            title: '股票部分',
            code: 1,
            data: res.list.stockList,
            total: [ 'dqNum','unsettledSellNum','optionNum','settledNum', 'otherNum','marketValue','marketValueUsd',],
            columns: [
              {
                title: '股码',
                width: 100,
                dataIndex: 'code',
                type: 'string',
                search: true,
              },
              {
                title: '股名',
                width: 100,
                dataIndex: 'name',
                type: 'string',
                search: true,
              },
              {
                title: '货币',
                width: 75,
                dataIndex: 'currency',
                type: 'string',
                filterAuto: true,
              },
              {
                title: '股数',
                dataIndex: 'amount',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '总数量',
                dataIndex: 'stockNum',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'DQ冻结数量',
                dataIndex: 'dqNum',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '即将交割数量（UNSETTLED SELL）',
                dataIndex: 'unsettledSellNum',
                width: 100,
                type: 'number',
                sorter: true,
              },
              {
                title: '期权冻结数量',
                dataIndex: 'optionNum',
                width: 75,
                type: 'number',
                sorter: true,
              },
               {
                title: '可用数量',
                dataIndex: 'settledNum',
                width: 75,
                type: 'number',
                sorter: true,
              },
               {
                title: '其他数量',
                dataIndex: 'otherNum',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '市价',
                dataIndex: 'marketPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '成本',
                dataIndex: 'costPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '市值',
                dataIndex: 'marketValue',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '市值(USD)',
                dataIndex: 'marketValueUsd',
                width: 75,
                type: 'number',
                sorter: true,
              },
            ],
          },
          dataSourceAqPart: {
            title: 'AQ部分',
            code: 1,
            data: res.list.aqList,
            total: [],
            columns: [
              {
                title: 'Stock',
                width: 100,
                dataIndex: 'code',
                type: 'string',
                search: true,
              },
              {
                title: 'NAME',
                width: 100,
                dataIndex: 'des1',
                type: 'string',
                search: true,
              },
              {
                title: 'Start Date',
                dataIndex: 'tradeDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: 'Normal Shares',
                dataIndex: 'normalShares',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Step Up Shares',
                dataIndex: 'stepUpShares',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Trade Date Price',
                dataIndex: 'tradeDatePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Current Price',
                dataIndex: 'currentPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Strike',
                dataIndex: 'strikePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'KO',
                dataIndex: 'koPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'End Date',
                dataIndex: 'expireDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: 'Remaining Exposure',
                dataIndex: 'notl',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Remaining Exposure (USD)',
                dataIndex: 'notlUsd',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '距KO幅度',
                dataIndex: 'toKoPercent',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '距执行价幅度',
                dataIndex: 'toStrikePercent',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
            ],
          },
          dataSourceDqPart: {
            title: 'DQ部分',
            code: 1,
            data: res.list.dqList,
            total: [],
            columns: [
              {
                title: 'Stock',
                width: 100,
                dataIndex: 'code',
                type: 'string',
                search: true,
              },
              {
                title: 'NAME',
                width: 100,
                dataIndex: 'des1',
                type: 'string',
                search: true,
              },
              {
                title: 'Start Date',
                dataIndex: 'tradeDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: 'Normal Shares',
                dataIndex: 'normalShares',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Step Up Shares',
                dataIndex: 'stepUpShares',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Trade Date Price',
                dataIndex: 'tradeDatePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Current Price',
                dataIndex: 'currentPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Strike',
                dataIndex: 'strikePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'KO',
                dataIndex: 'koPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'End Date',
                dataIndex: 'expireDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: 'Remaining Exposure',
                dataIndex: 'notl',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: 'Remaining Exposure (USD)',
                dataIndex: 'notlUsd',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '距KO幅度',
                dataIndex: 'toKoPercent',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '距执行价幅度',
                dataIndex: 'toStrikePercent',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
            ],
          },
          dataSourceOptionPart: {
            title: '股票期权部分',
            code: 1,
            data: res.list.stockOptionList,
            total: [],
            columns: [
              {
                title: '交易',
                width: 100,
                dataIndex: 'sellType',
                type: 'string',
                filters: [
                  {
                    text: 'Sell Put',
                    value: 1,
                  },
                  {
                    text: 'Sell Call',
                    value: 2,
                  },
                  {
                    text: 'Buy Put',
                    value: 3,
                  },
                  {
                    text: 'Buy Call',
                    value: 4,
                  },
                ],
                render: text => (
                  <span>
                    {{ 2: 'Sell Call', 1: 'Sell Put', 3: 'Buy Put', 4: 'Buy Call' }[text]}
                  </span>
                ),
              },
              {
                title: '挂勾',
                width: 100,
                dataIndex: 'code',
                type: 'string',
                search: true,
              },
              {
                title: '行使价',
                dataIndex: 'strikePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '股数',
                dataIndex: 'notl',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '交易日',
                dataIndex: 'tradeDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '到期日',
                dataIndex: 'expireDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '现在价格',
                dataIndex: 'currentPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '交易时价格',
                dataIndex: 'tradeDatePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '距离行使价',
                dataIndex: 'optionToStrike',
                width: 75,
                type: 'number',
                sorter: true,
                render: value => (
                  <span>{value ? NumberDivide(mathService.mul(value, 100), null, '%') : null}</span>
                ),
              },
              {
                title: '收益',
                dataIndex: 'optionProfit',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '绝对金额',
                dataIndex: 'totalCostPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '曝险部位 (USD)',
                dataIndex: 'positionSize',
                width: 75,
                type: 'number',
                sorter: true,
              },
            ],
          },
          dataSourceForexOptionPart: {
            title: '外汇期权部分',
            code: 1,
            data: res.list.forexOptionList,
            total: [],
            columns: [
              {
                title: '结构',
                width: 100,
                dataIndex: 'des2',
                type: 'string',
                search: true,
              },
              {
                title: '交易日',
                dataIndex: 'tradeDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '基准货币',
                width: 100,
                dataIndex: 'currency',
                type: 'string',
                filterAuto: true,
              },
              {
                title: '相对货币',
                width: 100,
                dataIndex: 'counterCurrency',
                type: 'string',
                filterAuto: true,
              },
              {
                title: '金额',
                dataIndex: 'notl',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '行使价',
                dataIndex: 'strikePrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '比价日',
                dataIndex: 'expireDate',
                type: 'date',
                render: (value, row, index) => {
                  if (!value) return null;
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '期权金收入',
                dataIndex: 'initPrem',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '美金曝险',
                dataIndex: 'notl',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '现价',
                dataIndex: 'currentPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '价内程度',
                dataIndex: 'inPriceDegree',
                width: 75,
                type: 'number',
                sorter: true,
                render: value => (
                  <span>{value ? NumberDivide(mathService.mul(value, 100), null, '%') : null}</span>
                ),
              },
            ],
          },
          dataSourceHedgeFundPart: {
            title: '对冲基金部分',
            code: 1,
            data: res.list.hedgeFundList,
            total: [],
            columns: [
              {
                title: '基金名称',
                width: 100,
                dataIndex: 'des1',
                type: 'string',
                search: true,
              },
              {
                title: '货币',
                width: 100,
                dataIndex: 'currency',
                type: 'string',
                filterAuto: true,
              },
              {
                title: '持仓单位',
                dataIndex: 'unit',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                dataIndex: 'costPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '现价',
                dataIndex: 'currentPrice',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '仓位市值',
                dataIndex: 'marketValue',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '价格升跌',
                dataIndex: 'priceUp',
                width: 75,
                type: 'number',
                sorter: true,
                render: value => (
                  <span>{value ? NumberDivide(mathService.mul(value, 100), null, '%') : null}</span>
                ),
              },
            ],
          },
        });
      },
    });
    dispatch({
      type: 'parts/GetCpbMailDate',
      callback: res => {
        that.setState({
          selectDate: res.list,
        });
      },
    });
  }

  sheetItem(dataInfos, dataInfosColumns, sheetName) {
    let res = {};
    const infosTable = [];
    const infosFilter = [];
    const sheetHeader = [];
    const sheetWidth = [];
    if (dataInfosColumns) {
      for (const j in dataInfosColumns) {
        const item = dataInfosColumns[j];
        infosFilter.push(item.title);
        sheetHeader.push(item.title);
        sheetWidth.push({ wpx: 100 });
      }
    }
    if (dataInfos) {
      for (const i in dataInfos) {
        const dataInfosItem = dataInfos[i];
        if (dataInfos) {
          const obj = {};
          for (const j in dataInfosColumns) {
            const cItem = dataInfosColumns[j];
            if (cItem.dataIndex === 'sellType') {
              obj[cItem.title] = { 2: 'Sell Call', 1: 'Sell Put', 3: 'Buy Put', 4: 'Buy Call' }[
                dataInfosItem[cItem.dataIndex]
              ];
            } else {
              obj[cItem.title] = dataInfosItem[cItem.dataIndex];
            }
          }
          infosTable.push(obj);
        }
      }
    }
    res = {
      sheetData: infosTable,
      sheetName,
      sheetFilter: infosFilter,
      sheetHeader,
      columnWidths: sheetWidth,
    };
    return res;
  }

  outXlsx() {
    const {
      dataSourceTotal,
      dataSourceBondPart,
      dataSourceStockPart,
      dataSourceAqPart,
      dataSourceDqPart,
      dataSourceOptionPart,
      dataSourceForexOptionPart,
      dataSourceHedgeFundPart,
    } = this.state;

    const option = {
      fileName: dataSourceTotal.title,
      datas: [],
    };

    option.datas.push(
      this.sheetItem(dataSourceTotal.data, dataSourceTotal.columns, dataSourceTotal.title)
    );
    option.datas.push(
      this.sheetItem(dataSourceBondPart.data, dataSourceBondPart.columns, dataSourceBondPart.title)
    );
    option.datas.push(
      this.sheetItem(
        dataSourceStockPart.data,
        dataSourceStockPart.columns,
        dataSourceStockPart.title
      )
    );
    option.datas.push(
      this.sheetItem(dataSourceAqPart.data, dataSourceAqPart.columns, dataSourceAqPart.title)
    );
    option.datas.push(
      this.sheetItem(dataSourceDqPart.data, dataSourceDqPart.columns, dataSourceDqPart.title)
    );
    option.datas.push(
      this.sheetItem(
        dataSourceOptionPart.data,
        dataSourceOptionPart.columns,
        dataSourceOptionPart.title
      )
    );
    option.datas.push(
      this.sheetItem(
        dataSourceForexOptionPart.data,
        dataSourceForexOptionPart.columns,
        dataSourceForexOptionPart.title
      )
    );
    option.datas.push(
      this.sheetItem(
        dataSourceHedgeFundPart.data,
        dataSourceHedgeFundPart.columns,
        dataSourceHedgeFundPart.title
      )
    );

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  onSelectTime(date) {
    this.dataSourceChange(date);
  }

  render() {
    const {
      selectDate,
      dataSourceTotal,
      dataSourceBondPart,
      dataSourceStockPart,
      dataSourceAqPart,
      dataSourceDqPart,
      dataSourceOptionPart,
      dataSourceForexOptionPart,
      dataSourceHedgeFundPart,
    } = this.state;
    const selectList = [];
    if (selectDate.length !== 0) {
      for (let i = 0; i < selectDate.length; i++) {
        selectList.push(
          <Option key={!selectDate[i] ? ' ' : selectDate[i].substring(0, 10)}>
            {!selectDate[i] ? ' ' : selectDate[i].substring(0, 10)}
          </Option>
        );
      }
    }
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col md={24} sm={24}>
              选择日期：
              <Select
                placeholder="请选择"
                style={{ width: 220, margin: ' 16px 30px 0px 12px' }}
                onChange={this.onSelectTime.bind(this)}
              >
                {selectList}
              </Select>
              <Button type="primary" style={{ marginLeft: 25 }} onClick={this.outXlsx.bind(this)}>
                导出XLSX
              </Button>
            </Col>
          </Row>
          <br />
          <StandardTablePro dataSource={dataSourceTotal} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceBondPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceStockPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceAqPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceDqPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceOptionPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceForexOptionPart} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceHedgeFundPart} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const that = this;
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default Parts;
